<template>
  <div class="tenant-container">
    <search-table
      @search="search"
      :addTenant="true"
      @addTenantFn="addTenantFn"
    />
    <el-table
      class="table-content"
      :data="tableDate"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="tenantName" label="租户名称" width="180">
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间"> </el-table-column>
      <el-table-column prop="tenantState" label="状态">
        <template slot-scope="scope">
          <div class="scopeStatus">
            <label
              class="status-cricl"
              :class="scope.row.tenantState === 1 ? 'status-1' : ''"
            ></label>
            <span>{{ scope.row.tenantState === 1 ? "运行中" : "禁用中" }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="screenList" label="管理大屏编号">
        <template slot-scope="scope">
          <div class="scopeStatus">
            <span>{{
              scope.row.screenIdList && scope.row.screenIdList.length > 0
                ? scope.row.screenIdList.join(",")
                : "--"
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #08a44e"
            @click="editFn(scope.row)"
            size="small"
            >编辑</el-button
          >
          <el-button
            v-if="scope.row.tenantState === 1"
            style="color: #fa6400"
            @click="isDisableFn(scope.row)"
            type="text"
            size="small"
          >
            禁用
          </el-button>
          <el-button
            v-if="scope.row.tenantState !== 1"
            style="color: #08a44e"
            @click="isDisableFn(scope.row)"
            type="text"
            size="small"
          >
            启用
          </el-button>
          <el-button
            @click="delFn(scope.row)"
            type="text"
            style="color: #d01010"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <page
      class="page"
      @changePageFn="search"
      :currentPage="currentPage"
      :total="total"
    />
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      top="20%"
      class="dialog-conttent"
    >
      <div v-if="type === 3">
        <div class="title">
          <img
            class="title-icon"
            src="../../assets/icon_pop_error.png"
            alt=""
            srcset=""
          />
          确认删除该租户？
        </div>
        <div class="info">删除后，该租户信息将不可恢复</div>
      </div>
      <div v-if="type === 0">
        <div class="title">
          <img
            class="title-icon"
            src="../../assets/icon_pop_warning.png"
            alt=""
            srcset=""
          />
          确认禁用该租户？
        </div>
        <div class="info">禁用后，该租户的所用大屏将不可正常使用</div>
      </div>
      <div v-if="type === 1">
        <div class="title" style="text-indent: 22px">确认启用该租户</div>
        <div class="info">启用后，该租户的所用大屏将开始使用</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="small" @click="dialogVisible = false">取 消</el-button>
        <el-button type="small" class="bg1" @click="sureFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import searchTable from "@/components/searchTable.vue";
import page from "@/components/page.vue";

export default {
  name: "TenantList",
  data() {
    return {
      dialogVisible: false,
      total: 0,
      currentPage: 1,
      currentTableObj: null,
      type: 1, // 1启用  0禁用 3 删除
      params: {
        current: 1,
        keyword: "",
        type: "",
        size: 10,
      },
      tableDate: [],
    };
  },
  components: {
    searchTable,
    page,
  },
  methods: {
    async getData() {
      try {
        const resultObj = await this.$API.getTenantList(this.params);
        this.tableDate = resultObj.records;
        this.currentPage = resultObj.current;
        this.total = resultObj.total;
      } catch (err) {
        console.error(err);
      }
    },
    search(obj) {
      this.params = Object.assign(this.params, obj);
      this.getData();
    },
    addTenantFn() {
      // 进入编辑界面
      console.log("edit");
      this.$router.push("/tenant/info");
    },
    isDisableFn(row) {
      this.type = row.screenState === 1 ? 0 : 1;
      this.currentTableObj = row;
      this.dialogVisible = true;
    },
    editFn(row) {
      this.$router.push({
        path: "/tenant/tenantInfo",
        query: { id: row.id },
      });
    },
    delFn(row) {
      this.type = 3;
      this.currentTableObj = row;
      this.dialogVisible = true;
    },
    async sureFn() {
      const { type, currentTableObj } = this;
      let curParams = {
        id: "",
        tenantState: "",
      };
      let urlApi = null;
      if (type === 3) {
        // 删除
        urlApi = this.$API.delTenant;
        curParams = { id: currentTableObj.id };
      } else {
        // 禁用/启用
        curParams = {
          id: currentTableObj.id,
          tenantState: currentTableObj.tenantState === 1 ? 0 : 1,
        };
        urlApi = this.$API.editState;
      }
      this.dialogVisible = false;
      try {
        await urlApi(curParams);
        this.$message.success("操作成功");
        this.getData();
      } catch (err) {
        console.error(err);
      }
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.tenant-container {
  background: #fff;
  width: 100%;
  overflow: hidden;
  padding: 20px;
}
.table-content {
  margin-top: 20px;
  ::v-deep th.el-table__cell {
    background-color: #e9ebf0;
  }
  ::v-deep .el-table__cell {
    padding: 8px 0px;
  }
  .scopeStatus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .status-cricl {
      display: block;
      width: 8px;
      height: 8px;
      background: #999;
      margin-right: 5px;
      border-radius: 5px;
    }
    .status-1 {
      background: #f0bf28;
    }
  }
}
.page {
  float: right;
}
.dialog-conttent {
  .title {
    text-align: left;
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
    .title-icon {
      margin-right: 4px;
      float: left;
      width: 22px;
      height: 22px;
    }
  }
  .info {
    text-align: left;
    text-indent: 24px;
    font-size: 12px;
    color: #999;
  }
}
</style>
